<template>
  <div class="table-content">
    <el-row class="row-header">
      <slot name="addBtn"></slot>
    </el-row>

    <el-row>
      <el-table :data="tableData.currentPageRecords" v-loading="loading">
        <el-table-column type="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column
          align="center"
          :prop="index"
          :label="item"
          v-for="(item, index) in areaList"
          :key="index"
        >
        </el-table-column>
        <el-table-column label="操作" width="250px" align="center">
          <template #default="{ row }">
            <slot name="operate" :row="row"></slot>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row>
      <div class="row-footer">
        <el-pagination layout="slot">
          <template>
            <el-row>
              <el-col :span="12" class="totalCount">
                <span>
                  共&nbsp;{{ tableData.totalCount }}&nbsp;条记录&nbsp;&nbsp;
                  第&nbsp;{{ params.pageIndex }}&nbsp;/&nbsp;{{ pages }}&nbsp;页
                </span>
              </el-col>
              <el-col :span="12" class="btn">
                <el-button
                  plain
                  class="btn-prev"
                  :disabled="params.pageIndex <= 1 ? true : false"
                  @click="changePageIndex(-1)"
                  >上一页</el-button
                >
                <el-button
                  plain
                  class="btn-next"
                  :disabled="params.pageIndex >= pages ? true : false"
                  @click="changePageIndex(1)"
                  >下一页</el-button
                >
              </el-col>
            </el-row>
          </template>
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'DkditmeTableContent',

  data () {
    return {
      loading: false
    }
  },

  props: {
    tableData: {
      type: Object
    },
    params: {
      type: Object
    },
    areaList: {
      type: Object
    }
  },

  mounted () {},

  methods: {
    // 上一页/下一页
    changePageIndex (val) {
      this.$parent.params.pageIndex += val
      this.$parent.getAreaList()
    }
  },

  computed: {
    pages () {
      return Math.ceil(this.tableData.totalCount / this.params.pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.table-content {
  width: 100%;
  border-radius: 6px;
  background-color: #fff;
  padding: 20px;
  .row-header {
    height: 36px;
    margin-bottom: 20px;

    /deep/ .col-btn {
      height: 36px;
      text-align-last: left !important;
      .el-button--info {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 36px;
        border-color: #ff8136 !important;
        background-color: #ff8136 !important;
        padding: 0;
        .el-icon-circle-plus-outline {
          font-size: 16px;
        }
      }
    }
  }

  .row-footer {
    height: 96px;
    padding: 32px 20px;
    .el-pagination {
      padding: 0;
      .totalCount {
        text-align: left;
        span {
          height: 100%;
          line-height: 36px;
          font-size: 16px;
          font-weight: normal;
          color: #dbdfe5;
        }
      }
      .btn {
        text-align: right;
        .btn-prev,
        .btn-next {
          width: 70px;
          height: 32px;
          margin: 0 16px;
          border-radius: 2px;
          background-color: #d5ddf8;
          color: #606266;
          text-align: center;
          padding: 0;
        }
        .is-disabled {
          color: #d8dde3;
          background-color: #edf0f9;
        }
      }
    }
  }
}
</style>
